<template>
  <div class="wrapper">
    <div class="content">
      <div class="address-selector">
        <h2 style="color:  #368149;">更改地区</h2>
        <select v-model="selectedProvince" @change="updateCities">
          <option value="">请选择省份</option>
          <option v-for="(provincesData, province) in provinces" :key="province" :value="province">{{ province }}
          </option>
        </select>
        <select v-model="selectedCity" @change="updateCounties">
          <option value="">请选择城市</option>
          <option v-for="(citiesData, city) in cities" :key="city" :value="city">{{ city }}</option>
        </select>
        <select v-model="selectedCounty">
          <option value="">请选择县区</option>
          <option v-for="county in counties" :key="county" :value="county">{{ county }}
          </option>
        </select>
        <div>
          <div style="font-size: 14px; line-height: 18px;color: #368149;">详细地址:</div>
          <div ref="detail" aria-placeholder="镇乡街道门牌号"
            style="width: 190px;height: 60px;font-size: 14px;padding: 5px;background-color: #fff;border: 0;outline: none;color: black;border-radius: 4px;"
            contenteditable="true">
          </div>
        </div>
        <!-- <p style="color: black;">选择的地址：</p>
        <p>{{ selectedAddress }}</p> -->
        <div @click="update" class="btn">
          确认修改
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import emitter from '../../bus/index.js'
export default {
  name: "Test",
  created() { },
  data() {
    return {
      isShow: 1,
      selectedProvince: '',
      selectedCity: '',
      selectedCounty: '',
      selectedAddress: '',
      provinces: {
        "北京市": {
          "市辖区": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
        },
        "上海市": {
          "市辖区": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]
        },
        "广东省": {
          "广州市": ["荔湾区", "越秀区", "海珠区", "天河区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "从化区", "增城区"],
          "深圳市": ["福田区", "罗湖区", "南山区", "宝安区", "龙岗区", "盐田区", "坪山区", "光明区", "龙华区", "大鹏新区"],
          "珠海市": ["香洲区", "斗门区", "金湾区"],
          "汕头市": ["龙湖区", "金平区", "濠江区", "潮阳区", "潮南区", "澄海区", "南澳县"],
          "佛山市": ["禅城区", "南海区", "顺德区", "三水区", "高明区"]
        },
        "浙江省": {
          "杭州市": ["上城区", "下城区", "江干区", "拱墅区", "西湖区", "滨江区", "萧山区", "余杭区", "富阳区", "临安区", "桐庐县", "淳安县", "建德市"],
          "宁波市": ["海曙区", "江北区", "北仑区", "镇海区", "鄞州区", "奉化区", "象山县", "宁海县", "余姚市", "慈溪市"],
          "温州市": ["鹿城区", "龙湾区", "瓯海区", "洞头区", "永嘉县", "平阳县", "苍南县", "文成县", "泰顺县", "瑞安市", "乐清市"],
          "嘉兴市": ["南湖区", "秀洲区", "嘉善县", "海盐县", "海宁市", "平湖市", "桐乡市"],
          "湖州市": ["吴兴区", "南浔区", "德清县", "长兴县", "安吉县"],
          "绍兴市": ["越城区", "柯桥区", "上虞区", "新昌县", "诸暨市", "嵊州市"],
          "金华市": ["婺城区", "金东区", "武义县", "浦江县", "磐安县", "兰溪市", "义乌市", "东阳市", "永康市"],
          "衢州市": ["柯城区", "衢江区", "常山县", "开化县", "龙游县", "江山市"],
          "舟山市": ["定海区", "普陀区", "岱山县", "嵊泗县"],
          "台州市": ["椒江区", "黄岩区", "路桥区", "三门县", "天台县", "仙居县", "温岭市", "临海市"],
          "丽水市": ["莲都区", "青田县", "缙云县", "遂昌县", "松阳县", "云和县", "庆元县", "景宁畲族自治县", "龙泉市"]
        }
        // 可以添加更多省市县区数据
      },
      cities: {},
      counties: []
    };
  },
  props: {},
  methods: {
    update() {
      alert('update')
      let address = {
        shen: this.selectedProvince,
        shi: this.selectedCity,
        xian: this.selectedCounty,
        street: this.$refs.detail.innerText
      }
      localStorage.setItem("currentAddress", JSON.stringify(address))
      this.getSelectedAddress
      // emitter.emit('showMine', 0)
    },
    updateCities() {
      this.selectedCity = '';
      this.selectedCounty = '';
      this.cities = this.provinces[this.selectedProvince] || {};
    },
    updateCounties() {
      this.selectedCounty = '';
      this.counties = this.cities[this.selectedCity] || [];
    },
    getSelectedAddress() {
      this.selectedAddress = `${this.selectedProvince}-${this.selectedCity}-${this.selectedCounty}`;
      alert(this.selectedAddress)
    }
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  .content {
    .address-selector {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #c5f0cf;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    select {
      padding: 10px;
      margin: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 200px;
      background-color: #fff;
    }

    .btn {
      width: 30vw;
      height: 34px;
      text-align: center;
      line-height: 34px;
      color: white;
      border-radius: 4px;
      background-color: #368149;
      margin-top: 10px;
    }
  }

  border-radius: 4px;
  top: 15vh;
  left: 10vw;
  position: fixed;
  width: 80vw;
  height: fit-content;
  color: #41ff3e;
  background-color: #c5f0cf;
}
</style>